<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类别管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 添加类别对话框 -->
        <el-dialog title="添加类别" :visible.sync="dialogVisible" width="40%">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="类别编码" prop="categoryCode">
                    <el-input v-model="form.categoryCode" placeholder="请输入类别编码"></el-input>
                </el-form-item>
                <el-form-item label="类别名称" prop="categoryName">
                    <el-input v-model="form.categoryName" placeholder="请输入类别名称"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="form.description" placeholder="请输入描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 工具栏 -->
        <div class="toolbar">
            <el-button type="primary" @click="showAddDialog">添加类别</el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="categoryCode" label="类别编码" width="120"></el-table-column>
            <el-table-column prop="categoryName" label="类别名称" width="180"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                dialogVisible: false,
                form: {
                    categoryCode: '',
                    categoryName: '',
                    description: ''
                },
                rules: {
                    categoryCode: [
                        { required: true, message: '请输入类别编码', trigger: 'blur' }
                    ],
                    categoryName: [
                        { required: true, message: '请输入类别名称', trigger: 'blur' }
                    ]
                },
                tableData: []
            },
            created() {
                this.loadData();
            },
            methods: {
                // 提交表单
                submitForm() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            // 判断是新增还是编辑
                            const url = this.form.id ? '/category/update' : '/category/add';
                            axios.post(url, this.form)
                                .then(response => {
                                    if (response.data.code === 200) {
                                        this.$message.success(this.form.id ? '更新成功' : '添加成功');
                                        this.dialogVisible = false;
                                        this.loadData();
                                    } else {
                                        this.$message.error(response.data.msg);
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    this.$message.error('系统错误');
                                });
                        }
                    });
                },
                // 显示添加对话框
                showAddDialog() {
                    this.dialogVisible = true;
                    this.form = {
                        id: null,
                        categoryCode: '',
                        categoryName: '',
                        description: ''
                    };
                },
                // 加载数据
                loadData() {
                    axios.get('/category/list')
                        .then(response => {
                            if (response.data.code === 200) {
                                this.tableData = response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                },
                // 处理编辑
                handleEdit(row) {
                    this.form = {...row};
                    this.dialogVisible = true;
                },
                // 处理删除
                handleDelete(row) {
                    this.$confirm('确认删除该类别吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get('/category/delete/' + row.id)
                            .then(response => {
                                if (response.data.code === 200) {
                                    this.$message.success('删除成功');
                                    this.loadData();
                                } else {
                                    this.$message.error(response.data.msg);
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                this.$message.error('系统错误');
                            });
                    }).catch(() => {});
                }
            }
        });
    </script>
</body>
</html> 